<template>
  <BoTable
    :columns="_columns"
    :request="_request"
    :row-selection="rowSelection"
    row-key="id"
    ref="tableRef"
  >
    <template #toolbars>
      <Space :size="8">
        <Button type="primary" @click="onAdd"> 新增 </Button>
        <Button :disabled="!selectKeys.length" @click="onDelete"> 删除 </Button>
      </Space>
    </template>
  </BoTable>

  <FormModal :columns="_item">
    <template #details>
      <FormItemRest>
        <MonacoEditor v-model:value="monacoValue" />
      </FormItemRest>
    </template>
    <template #host>
      <Button @click="onSelectHost">选择主机</Button>
    </template>
  </FormModal>

  <FormModal2 :columns="_items">
    <template #details>
      <FormItemRest>
        <SelectHost v-model:checkList="checkList" />
      </FormItemRest>
    </template>
  </FormModal2>
</template>

<script setup lang="tsx">
import { computed, ref, watch } from 'vue';
import { SnippetsOutlined } from '@ant-design/icons-vue';
import { useFormModal } from '@boeyo/hooks';
import { BoFormProps, BoTable, BoTableProps } from '@boeyo/ui';
import { Button, FormItemRest, Modal, Space, message } from 'ant-design-vue';
import MonacoEditor from '@/components/monacoEditor/index.vue';
import SelectHost from '@/components/selectHost/index.vue';

const checkList = ref([]);
const monacoValue = ref();
const onSelectHost = () => {
  open2({
    title: '选择主机',
    // hideFooter: true,
    request: async (params: any) => {},
    defaultValue: {
      status: '1',
    },
  });
};
const { FormModal: FormModal2, open: open2 } = useFormModal({
  size: 'middle',
});

const _items = computed<BoFormProps['columns']>(() => [
  {
    title: '',
    valueType: 'input',
    dataIndex: 'details',
    wrapperCol: { span: 24 },
    colProps: { span: 24 },
  },
]);

const { FormModal, open, formRef } = useFormModal({
  size: 'middle',
  column: 2,
  formProps: {
    wrapperCol: { span: 18 },
    labelCol: { span: 6 },
  },
});

const onAdd = () => {
  open({
    title: '新增模板',
    // hideFooter: true,
    request: async (params: any) => {},
    defaultValue: {
      status: '1',
    },
  });
};

const selectKeys = ref<number[]>([]);
const rowSelection = computed<BoTableProps['rowSelection']>(() => {
  return {
    onChange(values) {
      selectKeys.value = values as number[];
    },
  };
});

const _columns = computed<BoTableProps['columns']>(() => [
  {
    title: '模板名称',
    dataIndex: 'name',
  },
  {
    title: '模板命令',
    dataIndex: 'command',
    customRender: ({ record }) => {
      const style = {
        marginRight: '5px',
        cursor: 'pointer',
      };

      const onClick = () => {
        // 检查浏览器是否支持 Clipboard API
        if (navigator.clipboard && window.isSecureContext) {
          // 使用异步的 writeText 方法
          navigator.clipboard
            .writeText(record.command)
            .then(() => {
              message.success('复制成功!');
            })
            .catch(() => {
              message.error('复制失败!');
            });
        }
      };
      return (
        <div>
          <SnippetsOutlined style={style} onClick={onClick} />
          <span>{record.command}</span>
        </div>
      );
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    hideInSearch: true,
  },
  {
    title: '修改时间',
    dataIndex: 'updateTime',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    actions: [
      {
        text: '详情',
        onClick(record) {
          console.log(record);

          open({
            title: (type) => (type === 'info' ? '详情' : '编辑'),
            modalType: 'info',
            request: async (params: any) => {},
            defaultValue: record,
          });
        },
      },
      {
        text: '删除',
        onClick(record) {
          onDelete(record);
        },
      },
    ],
  },
]);
const _item = computed<BoFormProps['columns']>(() => [
  {
    title: '模板名称',
    valueType: 'input',
    dataIndex: 'name',
    fieldProps: {
      placeholder: '请输入模板名称',
    },
    formItemProps: {
      labelAlign: 'left',
      rules: [
        {
          required: true,
          message: '请输入模板名称',
          trigger: 'blur',
        },
      ],
    },
  },
  {
    title: '超过时间',
    valueType: 'inputNumber',
    dataIndex: 'time',
    fieldProps: {
      placeholder: '请输入超过时间',
      addonAfter: '秒',
    },
    formItemProps: {
      labelAlign: 'left',
      rules: [
        {
          required: true,
          message: '请输入超过时间',
          trigger: 'blur',
        },
      ],
    },
  },
  {
    title: '选择主机',
    valueType: 'input',
    dataIndex: 'host',
    formItemProps: {
      labelAlign: 'left',
      rules: [
        {
          required: true,
          message: '请选择主机',
          trigger: 'blur',
        },
      ],
    },
  },
  {
    title: '脚本执行',
    valueType: 'switch',
    dataIndex: 'script',
    fieldProps: {
      checkedValue: 1,
      unCheckedValue: 0,
    },
    formItemProps: {
      labelAlign: 'left',
      tooltip: '!启用后会将命令写入脚本文件 传输到主机后执行',
      rules: [
        {
          required: true,
          message: '请脚本执行',
          trigger: 'blur',
        },
      ],
    },
  },
  {
    title: '',
    dataIndex: 'details',
    wrapperCol: { span: 24 },
    colProps: {
      span: 24,
    },
  },
]);
const _request = () => {
  return {
    total: 1,
    rows: [
      {
        name: 'fzx',
        command: 'uname',
        createTime: '2025-04-01 13:28:55',
        updateTime: '2025-04-01 13:28:55',
      },
    ],
  };
};

const onDelete = (record) => {
  const ids = record ? record.id : selectKeys.value.join();
  Modal.confirm({
    title: '系统提示',
    content: `确认要删除当前选中项数据吗？`,
    onOk: async () => {
      // selectKeys.value.join()
      // tableRef.value.refresh();
      message.success('操作成功');
    },
  });
};
</script>

<style scoped lang="scss">
.custom_btn {
  display: flex;
  justify-content: flex-end;
  :deep(.ant-btn) {
    width: 561px;
  }
}
</style>

<route lang="json">
{
  "meta": {
    "title": "命令模板"
  }
}
</route>
